<template>
  <el-select class="filter-select" v-model="seleValue" :placeholder="placeholder" @change="handleSelector"
    :disabled='isDisabled' size="small" :style="seleStyle">
    <el-option v-for="option in FilterSelectJSON" :key="option.value" :label="option.label" :value="option.value"
      :disabled="option.isChildDisabled">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    props: {
      FilterSelectJSON: {
        type: Array,
        default: ""
      },
      placeholder: {
        type: String,
        default: ""
      },
      isDisabled: {
        type: Boolean,
        default: false
      },
      multSeleType: { // 多个selet 遍历
        type: Number,
        default: -1
      },
      seleStyle: { // 宽
        type: Object,
        default: () => {}
      },
      selectorValue: {
        type: String,
        default: ""
      },
    },
    watch: {
      "selectorValue": {
        handler(newVal, oldVal) {
          // 当弹窗关闭的时候，我们这里清空下数据
          console.log(newVal, 'newVal---show')
          if (newVal) {
            this.seleValue = newVal;
          }
        },
        deep: true,
        immediate: true,
      },
    },
    data() {
      return {
        seleValue: ''
      }
    },

    mounted() {
      console.log(this.FilterSelectJSON, 'FilterSelectJSON------')

    },

    methods: {
      handleSelector(userSelector) {
        const values = this.FilterSelectJSON.find(params => params.value == userSelector).value;
        const selectorValue = `${userSelector}: ${values}`;
        const params = {
          label: userSelector,
          value: values,
          selectorValue: selectorValue
        };
        console.log(this.multSeleType, 'this.multSeleType------')
        // 多个multSeleType,循环加区分
        if (this.multSeleType > -1) {
          params.multSeleType = this.multSeleType;
        }
        this.$emit("onSelectChange", params)
      }

    },

  }

</script>

<style scoped lang="scss">
  .filter-select {
    width: 100%;
  }

</style>
